<template>
  <div class="app-container">
    <div class="customContainer">
      <el-form :model="formInline" :inline="true" size="small">
        <el-form-item>
          <el-select
            filterable
            clearable
            v-model="formInline.type_id"
            placeholder="请选择二级分类"
            style="width:160px"
          >
            <el-option
              v-for="item in towTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            filterable
            clearable
            v-model="formInline.is_check"
            placeholder="请选择考核类型"
            style="width:160px"
          >
            <el-option v-for="item in checkList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
        <el-button class="pull-right" type="primary" size="small" @click="addEditClick()">新增二级分类</el-button>
      </el-form>
      <!-- 列表 -->
      <el-table
        highlight-current-row
        :data="list"
        v-loading.body="listLoading"
        border
        fit
        size="small"
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="二级分类" prop="name"></el-table-column>
        <el-table-column align="center" label="所属一级分类" prop="parent_name"></el-table-column>
        <el-table-column align="center" label="机台标签">
          <template slot-scope="scope">{{scope.row.is_check==1?'考核类':'非考核类'}}</template>
        </el-table-column>
        <el-table-column align="center" label="出货方式">
          <template
            slot-scope="scope"
          >{{scope.row.shipment_type==1?'批量出货':scope.row.shipment_type==2?'日报出货':"实时出货"}}</template>
        </el-table-column>
        <!-- 列表的操作按钮 -->
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="addEditClick(scope.row.id,scope.$index,2,scope.row.name,scope.row.is_check,scope.row.is_ignore,scope.row.shipment_type,scope.row.suit_card_type)"
              type="primary"
              icon="el-icon-edit"
              size="mini"
            ></el-button>
            <!-- <el-button @click="addEditClick(scope.row.id,scope.$index,2)" type="primary" size="mini">新增二级分类</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹框 -->
      <el-dialog
        :close-on-click-modal="false"
        width="338px"
        :title="dialogTitle"
        :visible.sync="dialog"
        append-to-body
        @close="callOf('saveForm')"
      >
        <el-form :model="saveForm" ref="saveForm" :rules="rules" class="demo-form-inline">
          <el-form-item label="所属一级分类">
            <el-select v-model="saveForm.parent_id" :disabled="addTow">
              <el-option
                v-for="item in oneTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="　·考核类型" prop="is_check">
            <el-select v-model="saveForm.is_check">
              <el-option
                v-for="item in checkList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="　·出货方式" prop="shipment_type">
            <el-select v-model="saveForm.shipment_type">
              <el-option
                v-for="item in shipmentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="　·适用卡" prop="suit_card_type">
              <el-select v-model="suit_card_type" multiple collapse-tags @change="switchSuitCardType">
                  <el-option v-for="item in getSuitCardArr" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item :label="typeName" prop="name">
            <el-input v-model="saveForm.name"></el-input>
          </el-form-item>
          <el-checkbox v-model="offlineAnalyze">忽略离线分析</el-checkbox>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveClick('saveForm')" size="small">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination
        class="pull-left"
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="totalDataNumber"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getList, getPage, save, getType, getSuitCard } from "@/api/information/machineType";
export default {
  data() {
    return {
      list: null,
      listLoading: false,
      checkList: [
        { name: "考核类", id: "1" },
        { name: "非考核类", id: "2" },
      ],
      shipmentList: [
        { name: "日报出货", id: "2" },
        { name: "批量出货", id: "1" },
        { name: "实时出货", id: "3" },
      ],
      towTypeList: [],
      dialogTitle: "",
      addTow: false,
      currentPage: 1,
      totalDataNumber: 0,
      oneTypeList: "",
      editIndex: "",
      url: "",
      typeName: "",
      offlineAnalyze: false,
      formInline: {
        id: "",
        type_id: "",
        is_check: "",
      },
      getSuitCardArr:[],
      suit_card_type:[],
      saveForm: {
        name: "",
        id: "",
        parent_id: 0,
        is_ignore: "",
        shipment_type: "",
        is_check: "",
        suit_card_type:""
      },
      rules: {
        name: [{ required: true, message: "请输入内容", trigger: "blur" }],
        is_check: [
          { required: true, message: "请选择考核类型", trigger: "change" },
        ],
        shipment_type: [
          { required: true, message: "请选择出货方式", trigger: "change" },
        ],
        suit_card_type:[
          { required: true, message: '请选择适用卡', trigger: 'change' },
        ],
      },
      dialog: false,
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      vm.beforeComingIn();
    });
  },
  // created() {
  //     this.fetchData();
  //     this.getTowType();
  //     this.getOneType();
  // },

  methods: {
    //适用卡切换事件
    switchSuitCardType(val){
     
       this.saveForm.suit_card_type = val.length==0?'':val.join(',');
    },
    beforeComingIn() {
      if (
        this.$route.params.id &&
        this.$route.params.id != this.formInline.id
      ) {
        this.formInline.id = this.$route.params.id;
        this.oneTypeList = this.$route.params.list;
        // this.getOneType();
        this.getTowType();
        this.fetchData();
      }
    },
    getTowType() {
      getType(this.formInline).then((response) => {
        this.towTypeList = response;
      });
    },
    saveClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveForm.is_ignore = this.offlineAnalyze ? "1" : "0";
          save(this.saveForm, this.url).then((response) => {
            this.$message({
              type: response.code == 1 ? "success" : "error",
              message: response.message,
            });
            if (response.code == 1) {
              if (this.editIndex != null) {
                this.list[this.editIndex].name = this.saveForm.name;
                this.list[this.editIndex].is_check = this.saveForm.is_check;
                this.list[this.editIndex].is_ignore = this.saveForm.is_ignore;
                this.list[
                  this.editIndex
                ].shipment_type = this.saveForm.shipment_type;
                this.list[this.editIndex].suit_card_type = this.saveForm.suit_card_type;
              } else {
                this.fetchData();
              }
              this.$refs[formName].resetFields();
              this.dialog = false;
            }
          });
        }
      });
    },
    addEditClick(id, index, type, name, is_check, is_ignore, shipment_type,suit_card_type) {
      this.editIndex = index;
      this.saveForm.id = id;
      this.dialog = true;
      this.typeName = "二级分类名称";
      this.saveForm.parent_id = this.$route.params.id;
      this.saveForm.is_check = is_check ? is_check : "1";
      this.saveForm.shipment_type = shipment_type ? shipment_type : "2";
      this.addTow = name ? true : false;
      this.offlineAnalyze = is_ignore == 1 ? true : false;
      this.url = name
        ? "/Machine/update_machine_type"
        : "/Machine/create_machine_type";
      getSuitCard({}).then(res => {
          this.getSuitCardArr = res.data;
      });
      if (type == 2) {
        this.dialogTitle = "编辑二级分类";
        this.saveForm.suit_card_type = suit_card_type;
        this.suit_card_type = suit_card_type&&suit_card_type!=''? suit_card_type.split(','):'';
      } else {
        this.dialogTitle = "新增二级分类";
        this.saveForm.suit_card_type='';
        this.suit_card_type=[];
      }
      this.saveForm.name = name;
    },
    // 搜索
    searchClick() {
      this.fetchData();
    },
    // 获取一级分类
    // getOneType() {
    //     console.log(2222)
    //     getList({}).then(response => {
    //         this.oneTypeList = response;
    //         console.log(this.oneTypeList)
    //     })
    // },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      getPage(this.formInline)
        .then((response) => {
          this.totalDataNumber = response * 20;
          getList(this.formInline).then((response) => {
            if (response.length > 0) {
              this.list = response;
            } else {
              this.list = [];
            }
            this.listLoading = false;
          });
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then((response) => {
        this.list = response;
        this.listLoading = false;
      });
    },
    // 表单认证
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //关闭弹框重置
    callOf(formName) {
      this.dialog = false;
      this.offlineAnalyze = false;
      this.$refs[formName].resetFields();
    },
  },
};
</script>